<template>
	<view class='page_cont' v-if="info">
		<view class='job_desc'>
			<view class='job_name'>
				<scroll-view class='name' scroll-x="true" scroll-with-animation="true">{{info.name}}</scroll-view>
				<view class='wage'>{{info.salary}}</view>
			</view>
			<view class='job_type'>
				<view class='type_box'>
					<scroll-view class='scroll' scroll-x="true" scroll-with-animation="true">
						<view class='item_wrap'>
							<view class='type_item'><image class='icon' src="/static/icon12.png"></image><view class='text'>{{info.workAddressCity}}-{{info.workAddressRegion}}</view></view>
						</view>
						<view class='item_wrap'>
							<view class='type_item'><image class='icon' src="/static/icon13.png"></image><view class='text'>{{info.minimumEducationName}}</view></view>
						</view>
						<view class='item_wrap'>
							<view class='type_item'><image class='icon' src="/static/icon14.png"></image><view class='text'>{{info.workExperienceName}}</view></view>
						</view>
						<view class='item_wrap'>
							<view class='type_item'><image class='icon' src="/static/icon15.png"></image><view class='text'>全职{{info.recruitPeopleNum}}人</view></view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class='job_mech' @click='nav_mech_detail()'>
				<image class='logo' :src="info.businessLogo" mode="aspectFill"></image>
				<view class='mech_desc'>
					<view class="name_box"><scroll-view class='mech_name' scroll-x="true" scroll-with-animation="true">{{info.businessName}}</scroll-view></view>
					<!-- <view class='point'>教育平台<text class='text'> · 教育人数{{info.teacherNum?info.teacherNum:'-'}}</text></view> -->
					<view class='cate_box'><scroll-view class="scroll" scroll-x="true" scroll-with-animation="true">{{info.categoryNames?'教育范围: '+info.categoryNames:''}}</scroll-view></view>
				</view>
				<view class='mech_space'>
					<view class='text' v-if="info.distance||info.distance==0">{{info.space}}{{info.distance>1000?'km':'m'}}</view>
					<view class='text' v-else></view>
					<image class='icon' src="/static/icon7.png"></image>
				</view>
			</view>
		</view>
		<view class='job_view'>
			<view class="title">福利待遇<view class='line'></view></view>
			<view class='job_label_box'>
				<scroll-view class='scroll_label' scroll-with-animation="true" scroll-x="true">
					<view class='label' v-for="(item,index) in info.welfs" :key="index">{{item}}</view>
				</scroll-view>
			</view>
			<view class='job_text' v-if="info.welfareDetail.length>0">
				<view class='text' v-for="(item,index) in info.welfareDetail" :key="index">{{item}}</view>
			</view>
		</view>
		<view class='job_view'>
			<view class="title">职位详情<view class='line'></view></view>
			<view class='job_text'>
				<view class='text' v-for="(item,index) in info.details" :key="index">{{item}}</view>
			</view>
		</view>
		<view class='job_view'>
			<view class="title">工作地址<view class='line'></view></view>
			<view class='job_ads' @click="nav_location()">
				<view class="ads_box">
					<view class='ads_wrap'>
						<view class='ads_pro'><image class='icon' src="/static/icon16.png"></image><view class='text'>{{info.workAddressProvince}}-{{info.workAddressCity}}</view></view>
						<view class='ads_detail'>{{info.address}}</view>
					</view>
					<image class='icon' src="/static/icon7.png"></image>
				</view>
			</view>
			<view class='job_point'>
				<view class='title_wrap'><image class='icon' src="/static/icon17.png"></image><view class='text'>温馨提示</view></view>
				<view class='point'>承诺本平台所有职位不向您收费，如有不实，请立即举报，举报电话：400-886-8956</view>
			</view>
		</view>
		<view class='footer' style="padding:28rpx 60rpx;" v-if="status==7">
			<view class='edit_wrap' @click="nav_edit_job()">
				<image class='icon' src="/static/icon70.png"></image>
				<view class='text'>编辑</view>
			</view>
			<view class='cast_btn' @click='close_job()'>关闭职位</view>
		</view>
		<view class='footer' v-else>
			<view class='coll_wrap' @click="coll_job()">
				<view class='icon_box'><image class='icon' :src="info.collection?'/static/icon19.png':'/static/icon18.png'"></image></view>
				<view class='text'>{{info.collection?'已收藏':'收藏'}}</view>
			</view>
			<view class='cast_btn' @click="call_phone(info.businessPhone)" v-if="status==3||status==4">联系电话{{info.businessPhone?info.businessPhone:''}}</view>
			<view class='cast_btn' @click='cast_resume()' v-else>投递简历</view>
		</view>
		<view class="mask" @click="close_mask()" @touchmove.stop.prevent="moveHandle" v-show="show_mask">
			<view class='page_pop'>
				<image class='top_img' src="https://ossdev0.jiabala.com/mFmxyAtYYFcYj" mode="widthFix"></image>
				<view class='pref_desc'>
					<view class='title'>请完善简历信息</view>
					<view class='desc_wrap'>
						<view class='item' v-for="(item,index) in informations" :key="index">
							<image class='icon' :src="item.url"></image>
							<view class='text'>{{item.name}}</view>
						</view>
					</view>
					<view class='btn' @click.stop="nav_go()">立即完善</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from "../../api/home.js"
	import config from "../../api/config.js"
	import util from '../../utils/util.js'
	export default{
		data(){
			return {
				id: '',
				status: '',
				info: '',
				show_mask: false,
				informations: [{url:'',name:"基本信息"},{url:'',name:"求职意向"},{url:'',name:"教育经历"},{url:'',name:"工作经历"}],
				latitude: 22.820794,
				longitude: 113.284565,
				login: false
			}
		},
		onLoad(options){
			// console.log(options)
			this.id=options.id;
			if(options.status){
				// status  1-普通  2-发起  3-接收  4-邀请  5-收藏  6-机构详情职位  7-职位管理
				this.status=options.status
			}
			this.latitude=uni.getStorageSync("user_address").lat
			this.longitude=uni.getStorageSync("user_address").lng
			this.get_job_detail(options.id)
		},
		onShow() {
			var that=this;
			uni.getStorage({
				key: "token",
				success(res){
					that.login=true;
				}
			})
		},
		methods:{
			// 跳转
			nav_mech_detail(){
				if(this.status==6){
					uni.navigateBack({
						delta: 1
					})
					return false;
				}
				uni.navigateTo({
					url: '../mechDetail/mechDetail?id='+this.info.businessId+'&type=1'
				})
			},
			// 路线导航
			nav_location(){
				uni.openLocation({
					latitude: this.info.lat,
					longitude: this.info.lng,
					name: this.info.businessName,
					address: this.info.address
				})
			},
			// 编辑职位
			nav_edit_job(){
				uni.redirectTo({
					url: '/mypage/publishJob/publishJob?id='+this.id+'&businessId='+this.info.businessId+'&status=0'
				})
			},
			// 关闭职位
			close_job(){},
			// 收藏
			coll_job(){
				if(this.login){
					if(this.info.collection){
						this.cancel_coll();
					}else{
						this.create_token();
					}
				}else{
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			// 投简历
			cast_resume(){
				if(this.login){
					if(this.status==2){
						util.page_show_toast("您已投资过当前职位",2000)
						return false;
					}
					// if(this.status==3){
					// 	util.page_show_toast("当前职位单位已邀请过您",2000)
					// 	return false;
					// }
					this.get_resume_detail();
				}else{
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			// 联系
			call_phone(phone){
				if(phone){
					uni.makePhoneCall({
						phoneNumber: phone,
						success() {},
						fail() {}
					})
				}else{
					util.page_show_toast("暂未提供联系电话",1500)
				}
			},
			// 禁止触摸穿透
			moveHandle(){},
			// 关闭
			close_mask(){
				this.show_mask=false;
			},
			// 立即完善
			nav_go(){
				this.close_mask();
				uni.navigateTo({
					url: '../../mypage/resume/resume'
				})
			},
			// 职位详情
			get_job_detail(id){
				uni.showLoading({})
				var params={
					"id": id,
					"type": this.status==2?1:this.status==3?2:'',
					"lat": this.latitude,
					"lng": this.longitude
				}
				home.get_job_detail(params).then(res=>{
					uni.hideLoading()
					var info=res.data.data;
					info.space=info.distance>1000?(info.distance/1000).toFixed(2):info.distance;
					info.welfs=info.fringeBenefits?info.fringeBenefits.split(","):'';
					var welfarr=info.welfareDetail?info.welfareDetail.split("\n"):[];
					info.welfareDetail=welfarr.filter(function (s) {
							return s && s.trim();
						});
					// console.log(info.welfareDetail)
					var address=info.workAddressProvince+info.workAddressCity+info.workAddressRegion+info.workAddressTown;
					info.address=info.workAddressDetail?(info.workAddressDetail.indexOf("省")>-1?info.workAddressDetail:address+info.workAddressDetail):address;
					var positionarr=info.positionDetail?info.positionDetail.split("\n"):[];
					info.details=positionarr.filter(function (s) {
							return s && s.trim();
						});
					info.salary = info.salaryMin==0?"面议":`${info.salaryMin/1000}-${info.salaryMax/1000}k/月`
					this.info=info;
				})
			},
			// 防重复提交幂等token
			create_token(){
				config.create_token().then(res=>{
					this.add_coll(res.data.data);
				})
			},
			// 收藏
			add_coll(x_token){
				var params={
					"targetId": this.id,
					"targetType": 1
				}
				home.add_coll(params,x_token).then(res=>{
					this.get_job_detail(this.id);
					util.page_show_toast("收藏成功",1500);
				})
			},
			// 取消收藏
			cancel_coll(){
				var params={
					"id": this.info.collection.id
				}
				home.cancel_coll(params).then(res=>{
					this.get_job_detail(this.id);
					util.page_show_toast("取消收藏成功",1500);
					if(this.status==4){
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2];
						prevPage.$vm.refresh=true;
					}
				})
			},
			// 简历信息
			get_resume_detail(){
				var params={
					"id": uni.getStorageSync("userinfo").id
				}
				home.get_resume_detail(params).then(res=>{
					var info=res.data.data;
					this.informations[0].url=info.accountProfile?'/static/icon20.png':'/static/icon21.png';
					this.informations[1].url=info.jobIntention?'/static/icon20.png':'/static/icon21.png';
					this.informations[2].url=info.experiences.length>0?'/static/icon20.png':'/static/icon21.png';
					this.informations[3].url=info.works.length>0?'/static/icon20.png':'/static/icon21.png';
					if(!info.accountProfile||info.experiences.length==0||!info.jobIntention||info.works.length==0){
						this.show_mask=true;
					}else{
						this.delivery_resume(info);
					}
				})
			},
			// 投递简历
			delivery_resume(resume){
				var params={
					"positionInfoId": this.info.id,
					"positionInfoName": this.info.name,
					"userProfileId": resume.accountProfile.id,
					"status": 1,
					"type": 2,
					"businessLogo": this.info.businessLogo,
					"businessName": this.info.businessName,
					"receiverId": this.info.createBy,
					"receiverAvatar": this.info.createByAvatar,
					"receiverName": this.info.createByName,
					"receiverPhone": this.info.businessPhone,
					"senderAvatar": resume.accountProfile.avatar,
					"senderName": resume.accountProfile.nickName,
					"senderPhone": resume.accountProfile.phone?resume.accountProfile.phone:uni.getStorageSync("userinfo").phone
				}
				home.delivery_resume(params).then(res=>{
					util.page_show_toast("投递成功",2000)
				})
			},
		},
	}
</script>

<style lang="scss">
	.page_cont{
		width: 100%;
		padding-top: 24rpx;
		padding-bottom: 116rpx;
		.job_desc{
			padding: 0 32rpx 38rpx 32rpx;
			.job_name{
				display: flex;
				flex-direction: row;
				align-items: center;
				.name{
					flex: 1;
					width: 0;
					margin-right: 24rpx;
					height: 66rpx;
					font-size: 48rpx;
					font-weight: 600;
					line-height: 66rpx;
					color: #3F4A58;
					overflow: hidden;
					white-space: nowrap;
				}
				.wage{
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 500;
					line-height: 50rpx;
					color:rgba(91,144,255,1);
					.text1{
						font-size: 30rpx;
						font-weight:500;
						margin: 0 4rpx;
					}
					.text2{
						font-size: 30rpx;
						font-weight:500;
					}
				}
			}
			.job_type{
				margin: 12rpx 0 36rpx;
				overflow: hidden;
				white-space: nowrap;
				.type_box{
					height: 40rpx;
					overflow: hidden;
					.scroll{
						width: 100%;
						height: 54rpx;
						line-height: 40rpx;
						.item_wrap{
							display: inline-block;
							margin-right: 32rpx;
							.type_item{
								display: flex;
								flex-direction: row;
								align-items: center;
								.icon{
									width: 40rpx;
									height: 40rpx;
									margin-right: 4rpx;
								}
								.text{
									height: 40rpx;
									line-height: 40rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: #798594;
								}
							}
						}
					}
				}
			}
			.job_mech{
				padding: 36rpx 32rpx 34rpx 30rpx;
				background: #F6F7F9;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.logo{
					width: 76rpx;
					height: 76rpx;
					border: 2rpx solid rgba(112,112,112,0.11);
					border-radius: 8rpx;
				}
				.mech_desc{
					flex: 1;
					width: 0;
					margin: 0 14rpx;
					.name_box{
						margin-bottom: 2rpx;
						height: 40rpx;
						overflow: hidden;
						.mech_name{
							width: 100%;
							text-align: left;
							height: 54rpx;
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
							color: #3F4A58;
							overflow: hidden;
							white-space: nowrap;
						}
					}
					.point{
						width: 100%;
						text-align: left;
						height: 34rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #929BA7;
						overflow: hidden;
						.text{
							margin-left: 6rpx;
						}
					}
					.cate_box{
						height: 34rpx;
						overflow: hidden;
						.scroll{
							width: 100%;
							text-align: left;
							height: 46rpx;
							font-size: 24rpx;
							font-weight: 400;
							line-height: 34rpx;
							color: #929BA7;
							overflow: hidden;
							white-space: nowrap;
						}
					}
		
				}
				.mech_space{
					display: flex;
					flex-direction: row;
					align-items: center;
					.text{
						width: 130rpx;
						text-align: right;
						height: 34rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #798594;
						margin-right: 2rpx;
					}
					.icon{
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
		.job_view{
			padding: 0 32rpx 60rpx 32rpx;
			.title{
				width: 100%;
				text-align: left;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color: #3F4A58;
				position: relative;
				.line{
					position: absolute;
					top: 10rpx;
					left: -32rpx;
					width: 8rpx;
					height: 32rpx;
					background: #5B90FF;
				}
			}
			.job_label_box{
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				height: 48rpx;
				margin-top: 16rpx;
				.scroll_label{
					width: 100%;
					height: 64rpx;
					line-height: 40rpx;
					.label{
						display: inline-block;
						background: #F6F7F9;
						height: 48rpx;
						line-height: 48rpx;
						padding: 0 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color:rgba(146,155,167,1);
						border-radius: 8rpx;
						margin-right: 16rpx;
					}
				}
			}
			.job_text{
				width: 100%;
				margin-top: 40rpx;
				.text{
					font-size: 28rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: #798594;
					margin-bottom: 16rpx;
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
			.job_ads{
				background: url("https://ossdev0.jiabala.com/eNXJ84TjHjpT7")no-repeat 0 0/100% 100%;
				border-radius: 16rpx;
				margin-bottom: 44rpx;
				margin-top: 16rpx;
				.ads_box{
					padding: 24rpx 32rpx 24rpx 26rpx;
					border-radius: 16rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					background: linear-gradient(270deg, rgba(255, 255, 255, 0.78) 0%, #F6F9FD 100%);
					.ads_wrap{
						flex: 1;
						width: 0;
						margin-right: 16rpx;
						.ads_pro{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-bottom: 4rpx;
							.icon{
								width: 30rpx;
								height: 30rpx;
								margin-right: 12rpx;
							}
							.text{
								text-align: left;
								height: 42rpx;
								font-size: 30rpx;
								font-weight: 600;
								line-height: 42rpx;
								color: #3F4A58;
							}
						}
						.ads_detail{
							padding-left: 42rpx;
							width: 100%;
							box-sizing: border-box;
							// height: 34rpx;
							font-size: 24rpx;
							font-weight: 400;
							line-height: 34rpx;
							color: #798594;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
					.icon{
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
			.job_point{
				width: 100%;
				.title_wrap{
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 4rpx;
					.icon{
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
					.text{
						text-align: left;
						height: 34rpx;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
						color: #3F4A58;
					}
				}
				.point{
					text-align: left;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 30rpx;
					color: #929BA7;
				}
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 28rpx 32rpx 26rpx 48rpx;
			z-index: 200;
			border-top: 2rpx solid #F6F7F9;
			display: flex;
			flex-direction: row;
			background: #fff;
			.coll_wrap{
				padding-top: 6rpx;
				margin-right: 42rpx;
				width: 72rpx;
				.icon_box{
					width: 48rpx;
					height: 48rpx;
					margin: 0 auto;
					.icon{
						width: 100%;
						height: 100%;
					}
				}
				.text{
					text-align: center;
					height: 32rpx;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: #929BA7;
				}
			}
			.cast_btn{
				flex: 1;
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				background: #5B90FF;
				border-radius: 8px;
				color: #fff;
				font-size: 30rpx;
				font-weight: 400;
			}
			.edit_wrap{
				width: 48rpx;
				margin-right: 62rpx;
				.icon{
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 2rpx;
				}
				.text{
					text-align: center;
					height: 32rpx;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: #929BA7;
				}
			}
		}
		.page_pop{
			width: 580rpx;
			margin: 190rpx auto 0 auto;
			border-radius: 16rpx;
			background: #fff;
			.top_img{
				width: 100%;
			}
			.pref_desc{
				padding: 48rpx 88rpx;
				.title{
					text-align: center;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					color: #3F4A58;
					margin-bottom: 40rpx;
				}
				.desc_wrap{
					width: 100%;
					overflow: hidden;
					padding-bottom: 16rpx;
					.item{
						float: left;
						margin-right: 104rpx;
						margin-bottom: 28rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						&:nth-child(2n){
							margin-right: 0;
						}
						.icon{
							width: 24rpx;
							height: 24rpx;
							margin-right: 12rpx;
						}
						.text{
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 400;
							line-height: 40rpx;
							color: #798594;
						}
					}
				}
				.btn{
					width: 280rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					background: #5B90FF;
					border-radius: 16rpx;
					margin: auto;
					color: #fff;
					font-size: 30rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>
